<template>
	<n-modal v-bind="getBindValues" ref="LnModal" :style="{ width: lWidth }">
		<div class="ln-modal">
			<div class="ln-modal-header">
				<div class="title">{{ title }}</div>
				<lc-svg-icon @click="closeClick" icon-class="close" />
			</div>

			<div class="ln-modal-content" :style="{ maxHeight: lMaxHeight }">
				<slot name="default" />
				<div class="footer">
					<slot name="footer" />
				</div>
			</div>
		</div>
	</n-modal>
</template>

<script lang="ts" setup>
import { modalProps, NModal } from 'naive-ui';
import { LcSvgIcon } from '../LcSvgIcon';
import { isString } from '@/utils/is';
import type { PropType } from 'vue';

const props = defineProps({
	...modalProps,
	title: {
		type: String as PropType<string>,
		default: 'title',
	},
	width: {
		type: [String, Number] as PropType<string | number>,
		default: 680,
	},
	maxHeight: {
		type: [String, Number] as PropType<string | number>,
		default: 550,
	},
});

const getBindValues = computed(() => {
	return {
		...unref(props),
	};
});

const lWidth = computed(() => {
	return isString(props.width) ? props.width : `${props.width}`;
});
const lMaxHeight = computed(() => {
	return isString(props.maxHeight) ? props.maxHeight : `${props.maxHeight}px`;
});

const LnModal = ref();
const closeClick = () => {
	LnModal.value.doUpdateShow(false);
};
</script>

<style lang="scss" scoped>
.ln-modal {
	margin-top: 16vh;
	background-color: #3d4352;
	border-radius: 2px;

	.ln-modal-header {
		position: relative;
		display: flex;
		width: 100%;
		padding: 12px 20px;
		font-size: 16px;
		color: #fff;
		box-sizing: border-box;
		justify-content: space-between;
		align-items: center;

		.close {
			font-size: 22px;
			cursor: pointer;
		}

		&::after {
			position: absolute;
			bottom: 0;
			left: 20px;
			width: calc(100% - 40px);
			height: 1px;
			background-color: #fff;
			content: '';
			opacity: 0.2;
		}
	}

	.ln-modal-content {
		padding: 20px 20px 25px;
		overflow: auto;
		color: #fff;
		box-sizing: border-box;

		.footer {
			text-align: center;

			:deep(button + button) {
				margin-left: 40px !important;
			}
		}
	}
}
</style>
